{% extends 'base/base.html'%}
<!-- 标题头 -->
{% block title %}
<title>给点知识-注册页面</title>
{% endblock title %}
<!-- 面包屑 -->
{% block breadcrumb %}
<li class="breadcrumb-item"><a href="{% url 'index'%}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'user_register'%}">注册</a></li>
{% endblock breadcrumb %}

<!-- 内容 -->
{% block content %}
<div class='row'>
    <div class="col-sm">
    </div>
    <div class="col-sm">
      <form>
        {% csrf_token %}
        <div class="form-group">
          <label for="username_id">用户名</label>
          <input type="text" class="form-control" id="username_id" aria-describedby="emailHelp" maxlength="20">
          <small id="username_tip" class="form-text text-muted">请输入字母和中文组成的名称1-20</small>
        </div>
        <div class="form-group">
          <label for="password_id">密码</label>
          <input type="password" class="form-control" id="password_id" maxlength="20">
        </div>
        <div class="form-group">
          <label for="confire_password_id">确认密码</label>
          <input type="password" class="form-control" id="confire_password_id">
        </div>
        <div class="form-group">
          <label for="confire_password_id">验证码</label>
          <img src="{% url 'varify_code'%}" id='code_image_id' alt="验证码" onclick="this.src='/varify/code/?'+Math.random();">
          <input type="text" class="form-control" id="code_id">
        </div>
      </form>
      <button type="button" class="btn btn-primary btn-block" onclick="submit()">注册</button>
      <p style="margin-top: 20px;">
        <span style="font-size: 12px;">第三方注册:</span>
        <span class="btn" onclick="qqLogin()"><img src="{% static 'images/qq_login1.png'%}" alt="qq登录" title="QQ登录"></span>
        {%csrf_token%}
      </p>
    </div>
    <div class="col-sm">
    </div>
</div> 
<div class='row'>
  <div class="col-sm">
  </div>
</div>

<script type="text/javascript">
  // qq登录
  function toLogin()
  {
    //以下为按钮点击事件的逻辑。注意这里要重新打开窗口
    //否则后面跳转到QQ登录，授权页面时会直接缩小当前浏览器的窗口，而不是打开新窗口
    var A=window.open("oauth/index.php","TencentLogin",
          "width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
  }
  // 提交信息
  function submit(){
    var username = $("#username_id").val();
    var pwd = $("#password_id").val();
    var c_pwd = $("#confire_password_id").val();
    var csrfToken = $("[name='csrfmiddlewaretoken']").val();
    var code = $("#code_id").val();
    if(pwd!=c_pwd){
      $('#model_tip').modal('show');
      $('#model_title').text('错误提示');
      $('#model_content').text('两次输入密码不一致');
    }
    if(!code){
      $('#model_tip').modal('show');
      $('#model_title').text('错误提示');
      $('#model_content').text('验证码不能为空');
    }
    else{
      data = JSON.stringify({
        'username':username,
        'pwd':pwd,
        'c_pwd':c_pwd,
        'code':code
      });
      $.ajax({
          type:"POST",
          url:'/user/register/', 
          contentType:"application/json",
          dataType:"json",
          data:data,
          headers:{
            'X-CSRFToken':csrfToken
          },
          success:function(data){
            if(data['result']==1){
              $('#model_tip').modal('show');
              $('#model_title').text('成功提示');
              $('#model_content').text("恭喜用户"+data['data']['username']+"注册成功");
              setTimeout(function () {
                  window.location='/user/login/'
              }, 2000);
            }else{
              $('#model_tip').modal('show');
              $('#model_title').text('错误提示');
              $('#model_content').text(data['msg']);
            }
          },
          error:function(XMLHttpRequest, textStatus, errorThrown){
            $('#model_tip').modal('show');
            $('#model_title').text('错误提示');
            $('#model_content').text(errorThrown);
          }
        })
      $('#code_image_id').attr('src','/varify/code/?'+Math.random());
      }
    
  }
</script>
{% endblock content %}